<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <title> 裁剪为头像-</title>
    <link rel="stylesheet" href="js/jcrop/jquery.Jcrop.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jcrop/jquery.Jcrop.min.js"></script>
    <script>
      $(function(){
          $('#face').Jcrop();
      })
    </script>

    <style>
      .ff{
        border: 1px solid #e2e2e2;
        padding: 2px;
        border-radius: 50%  50%  50%  50%;
      }
      .ff:hover{
        border-radius:0;
      }
    </style>
  </head>
  <body>
  <img src="img/office2.jpg" class="ff" alt="">
  <hr>
  <img src="img/office.jpg" alt="" id="face">
  </body>
</html>
